<template>
  <el-container class="main-container">
    <!-- 头部区域 -->
    <el-header class="top">
      <!-- 头像 -->
      <div class="userinfo">
        <div class="avatar">
          <img
            :src="userInfo.user_pic"
            v-if="userInfo.user_pic"
          >
          <img
            src="../../assets/avatar1.svg"
            alt=""
            v-else
          />
        </div>
        <span>{{userInfo.username}}</span>
      </div>
      <div class="checkBtn-contain">
        <div class="checkBtn">
          <button
            class="learn-more"
            @click="toWall"
          >趣留言</button>
          <button
            class="learn-more"
            @click="toReq"
          >问答热街</button>
          <button
            class="learn-more"
            @click="toGoods"
          >宝贝认领</button>
          <button
            class="learn-more"
            @click="toBuy"
          >闲宝乐园</button>
        </div>

      </div>

      <div class="top-title">
        <span>  </span>
      </div>
      <span class="introduce"></span>

      <!-- 右侧的菜单 -->
      <Weather></Weather>
      <!-- 退出登录 -->
      <button
        class="learn-more2"
        @click="logoutFn"
      >退出登录</button>
      <!-- <button
        class="Btn"
        @click="logoutFn"
      >

        <div class="sign"><svg viewBox="0 0 512 512">
            <path d="M377.9 105.9L500.7 228.7c7.2 7.2 11.3 17.1 11.3 27.3s-4.1 20.1-11.3 27.3L377.9 406.1c-6.4 6.4-15 9.9-24 9.9c-18.7 0-33.9-15.2-33.9-33.9l0-62.1-128 0c-17.7 0-32-14.3-32-32l0-64c0-17.7 14.3-32 32-32l128 0 0-62.1c0-18.7 15.2-33.9 33.9-33.9c9 0 17.6 3.6 24 9.9zM160 96L96 96c-17.7 0-32 14.3-32 32l0 256c0 17.7 14.3 32 32 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32l-64 0c-53 0-96-43-96-96L0 128C0 75 43 32 96 32l64 0c17.7 0 32 14.3 32 32s-14.3 32-32 32z"></path>
          </svg></div>

        <div class="text">退出登录</div> -->
      <!-- </button> -->

    </el-header>
    <el-container>
      <!-- 侧边栏区域 -->
      <el-aside width="200px">
        <!-- 侧边栏导航区 -->
        <div class="select-list">
          <div class="userinfo-sel">
            <div
              class="userinfo-sel-title"
              @click="showUserItem"
            >
              <svg
                class="icon"
                aria-hidden="true"
              >
                <use xlink:href="#icon-wode"></use>
              </svg><span>我的</span>
              <svg
                class="icon xiala"
                ref="xiala"
                aria-hidden="true"
                v-show="!showUserItems"
              >
                <use xlink:href="#icon-xiala-"></use>
              </svg>
              <svg
                class="icon shangla"
                aria-hidden="true"
                v-show="showUserItems"
              >
                <use xlink:href="#icon-weibiaoti-1-25"></use>
              </svg>
            </div>
            <div
              class="items"
              v-show="showUserItems"
            >
              <router-link
                style="text-decoration: none;color:#e1e3f1;"
                to="/my/userinfo"
              >
                <div class="userinfo-sel-items">
                  <svg
                    class="icon"
                    aria-hidden="true"
                  >
                    <use xlink:href="#icon-baoxian"></use>
                  </svg><span>基本资料</span>
                </div>
              </router-link>
              <router-link
                to="/my/user-pwd"
                style="text-decoration: none;color:#e1e3f1;"
              >
                <div class="userinfo-sel-items">
                  <svg
                    class="icon"
                    aria-hidden="true"
                  >
                    <use xlink:href="#icon-shezhi"></use>
                  </svg><span>修改密码</span>
                </div>
              </router-link>

            </div>
          </div>
          <router-link
            to="/my/mycards"
            style="text-decoration: none;color:#e1e3f1;"
          >
            <div class="userinfo-sel">

              <div class="mycards">
                <svg
                  class="icon"
                  aria-hidden="true"
                >
                  <use xlink:href="#icon-shoucang"></use>
                </svg><span>我的帖子</span>
              </div>

            </div>
          </router-link>
          <router-link
            to="/my/chat"
            style="text-decoration: none;color:#e1e3f1;"
          >
            <div class="userinfo-sel">
              <div class="mycards">
                <svg
                  class="icon"
                  aria-hidden="true"
                >
                  <use xlink:href="#icon-shouye"></use>
                </svg><span>交流圈</span>
              </div>
            </div>
          </router-link>

        </div>

      </el-aside>
      <el-container>
        <!-- 页面主体区域 -->
        <el-main class="main-area">
          <!-- 二级挂载 -->
          <router-view></router-view>
        </el-main>
        <!-- 底部 footer 区域 -->
        <el-footer>江小墙</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
import Buy from "./Buy";
import Weather from "../../components/Weather";
import { mapState } from "vuex";
export default {
  name: "my-layout",
  data() {
    return {
      showUserItems: false,
    };
  },
  components: {
    Buy,
    Weather,
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.users.userInfo,
    }),
  },
  methods: {
    logoutFn() {
      if (confirm("确认退出吗？")) {
        // 1.1清空token
        this.$store.commit("UPDATETOKEN", "");
        // 跳转
        this.$router.push("/login");
      }
    },
    handleOpen(key, keyPath) {
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log(key, keyPath);
    },
    showUserItem() {
      console.log("点击了");
      this.showUserItems = !this.showUserItems;
    },
    // 按钮路由跳转
    toWall() {
      this.$router.push("/my/wall");
    },
    toBuy() {
      this.$router.push("/my/buy");
    },
    toGoods() {
      this.$router.push("/my/goods");
    },
    toReq() {
      this.$router.push("/my/request");
    },
  },

  mounted() {
    this.$store.dispatch("initMyBuyCards");
  },
};
</script>

<style lang="less" scoped>
.learn-more2 {
  display: flex;
  font-weight: 600;
  color: @text;
  text-transform: uppercase;
  padding: 1em 1em;
  background: #f6f0f0;

  border: 2px solid @pink-border;
  height: 80%;
  width: 3%;
  border-radius: 0.2em;
  transform-style: preserve-3d;
  transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),
    background 150ms cubic-bezier(0, 0, 0.58, 1);
  &::before {
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #f6f0f0;
    border-radius: inherit;
    box-shadow: 0 0 0 2px @pink-border, 0 0.625em 0 0 @pink-shadow;
    transform: translate3d(0, 0.75em, -1em);
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),
      box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
  }
  &:hover {
    background: @pink;
    transform: translate(0, 0.25em);
    &::before {
      box-shadow: 0 0 0 2px @pink-border, 0 0.5em 0 0 @pink-shadow;
      transform: translate3d(0, 0.5em, -1em);
    }
  }
  &:active {
    background: @pink;
    transform: translate(0em, 0.75em);
    &::before {
      box-shadow: 0 0 0 2px @pink-border, 0 0 @pink-shadow;
      transform: translate3d(0, 0, -1em);
    }
  }
}
.introduce {
  color: #222020;

  display: flex;
  font-weight: 400;
  justify-content: center;
  align-items: flex-end;
  height: 90%;
  // background-color: #3576e6;
  font-size: 1.3em;
  bottom: 0;
}
// mainarea
::v-deep .el-main.main-area {
  padding: 0 !important;
}
// 头部按钮

@bg: #fff;
@text: #382b22;
@light-pink: #fff0f0;
@pink: #ffe9e9;
@dark-pink: #f9c4d2;
@pink-border: #b18597;
@pink-shadow: #ffe3e2;

* {
  box-sizing: border-box;
  &::before,
  &::after {
    box-sizing: border-box;
  }
}

body {
  font-family: "Rubik", sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  min-height: 100vh;
  background: @bg;
}

.checkBtn-contain {
  display: flex;
  justify-content: center;
  align-items: center;
  padding-right: 25px;
}
.checkBtn {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 20px;
}
button {
  height: 40px;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  display: inline-block;
  cursor: pointer;
  outline: none;
  border: 0;
  vertical-align: middle;
  text-decoration: none;
  font-size: inherit;
  font-family: inherit;
  &.learn-more {
    display: flex;
    font-weight: 600;
    color: @text;
    text-transform: uppercase;
    padding: 1em 1em;
    background: @light-pink;
    border: 2px solid @pink-border;
    margin-left: 15px;
    border-radius: 0.75em;
    transform-style: preserve-3d;
    transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),
      background 150ms cubic-bezier(0, 0, 0.58, 1);
    &::before {
      position: absolute;
      content: "";
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: @dark-pink;
      border-radius: inherit;
      box-shadow: 0 0 0 2px @pink-border, 0 0.625em 0 0 @pink-shadow;
      transform: translate3d(0, 0.75em, -1em);
      transition: transform 150ms cubic-bezier(0, 0, 0.58, 1),
        box-shadow 150ms cubic-bezier(0, 0, 0.58, 1);
    }
    &:hover {
      background: @pink;
      transform: translate(0, 0.25em);
      &::before {
        box-shadow: 0 0 0 2px @pink-border, 0 0.5em 0 0 @pink-shadow;
        transform: translate3d(0, 0.5em, -1em);
      }
    }
    &:active {
      background: @pink;
      transform: translate(0em, 0.75em);
      &::before {
        box-shadow: 0 0 0 2px @pink-border, 0 0 @pink-shadow;
        transform: translate3d(0, 0, -1em);
      }
    }
  }
}
.select-list {
  display: flex;
  flex-direction: column;
  height: 50%;
}
.mycards {
  background-color: #7797f8;
  width: 85%;
  padding: 0 3px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  letter-spacing: 6px;
  margin-top: 20px;
  border-radius: 20px;
  transition: all ease 0.6s;
  cursor: pointer;
  .icon {
    width: 30px;
    height: 30px;
  }
}
.mycards:hover {
  background-color: #a16bf4;
}

.items {
  width: 75%;
  display: flex;
  justify-content: center;
  flex-direction: column;
}
.xiala {
  cursor: pointer;
}

.userinfo-sel {
  display: flex;
  justify-content: center;
  align-items: center;
  color: #e1e3f1;
  font-size: 1.3rem;
  font-weight: 600;
  text-align: center;
  transition: all 0.3s ease;

  flex-direction: column;
  .icon {
    width: 30px;
    height: 30px;
  }
}

.userinfo-sel-title {
  background-color: #7797f8;
  width: 85%;
  padding: 0 3px;
  display: flex;
  justify-content: space-around;
  align-items: center;
  letter-spacing: 6px;
  margin-top: 20px;
  border-radius: 20px;
}
.userinfo-sel-items {
  background-color: #7797f8;
  padding: 0 3px;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  letter-spacing: 2px;
  margin-top: 5px;
  cursor: pointer;
  transition: all 0.6s ease;
  border-radius: 10px;
}
.userinfo-sel-items:hover {
  background-color: #a16bf4;
}
.main-container {
  height: 100%;
  .el-header,
  .el-aside {
    background-color: #a4b6ea;
    justify-content: center;
  }
  .main-area {
    padding-top: 30px;
    // background-image: url("../../assets/wallpaper-1.jpg");
    background-color: #f9f9f9 !important ;
  }
  /*定义滚动条宽度和颜色*/
  .main-area::-webkit-scrollbar {
    width: 10px;
  }

  .main-area::-webkit-scrollbar-track {
    background: #9ebdef;
  }

  .main-area::-webkit-scrollbar-thumb {
    background: #32aae6;
  }

  /* 悬停效果 */
  .main-area::-webkit-scrollbar-thumb:hover {
    background: #3576e6;
  }
  .top {
    height: 100px !important;
    // background-color: #7c92f8 !important;
    background-image: url("../../assets/bac6.png");

    position: relative;
    .top-title {
      display: flex;
      justify-content: center;
      align-items: center;
      padding-left: 60px;
      // background-color: #7a99e9;
      span {
        display: flex;
        color: rgba(0, 0, 0, 0.638);
        background-color: #a4b6ea;
        box-shadow: 1px 1px 1px 1px black, 1px 1px 1px 1px blue,
          1px 1px 1px 1px rgb(16, 87, 208), 1px 1px 1px 1px rgb(231, 228, 91);
        font-size: 3rem;
      }
    }
  }
  .el-header {
    padding: 0;
    display: flex;
    justify-content: space-between;
  }
  .el-main {
    display: flex;
    overflow-y: scroll;
    height: 0;
    background-color: #f2f2f2;
  }
  .el-footer {
    background-color: #eee;
    font-size: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
  }
}

.userinfo {
  display: flex;
  width: 250px;
  justify-content: center;
  align-items: center;
  text-align: center;
  padding: 5px;
}
.avatar {
  border-radius: 100px;
  width: 100px;
  height: 100px;
  background-color: #fff;
  margin-right: 10px;
  object-fit: cover;
}
.avatar > img {
  width: 100%;
  height: 100%;
  border-radius: 37%;
}
.userinfo > span {
  min-width: 100px;
  min-height: 30px;
  max-width: 200px;
  box-sizing: border-box;
  border-radius: 8px;
  line-height: 30px;
  background-color: #6778e5;
}
.avatar > img {
  width: 100%;
  height: 100%;
}

// 按钮
.Btn {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 45px;
  height: 45px;
  border: none;
  border-radius: 50%;
  cursor: pointer;
  overflow: hidden;
  transition-duration: 0.3s;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.199);
  background-color: rgb(255, 65, 65);
  position: absolute;
  right: 0;
  top: 50px;
  transform: translateX(27%);
  transition: all 0.5s ease;
}

/* plus sign */
.sign {
  width: 100%;
  transition-duration: 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.5s ease;
}

.sign svg {
  width: 17px;
}

.sign svg path {
  fill: white;
}
/* text */
.text {
  position: absolute;
  right: 0%;
  width: 0%;
  opacity: 0;
  color: white;
  font-size: 1.2em;
  font-weight: 600;
  transition-duration: 0.3s;
  opacity: 0;
}
/* hover effect on button width */
.Btn:hover {
  width: 125px;
  border-radius: 40px;
  transition-duration: 0.3s;
  transform: translateX(-1%);
}

.Btn:hover .sign {
  width: 30%;
  transition-duration: 0.3s;
  padding-left: 10px;
  padding-right: 20px;
}
/* hover effect button's text */
.Btn:hover .text {
  opacity: 1;
  width: 70%;
  transition-duration: 0.3s;
}
/* button click effect*/
.Btn:active {
  transform: translate(2px, 2px);
}
::v-deep .el-footer {
  height: 10px !important;
}
</style>